<template>
  <div id="index" ref="appRef">
    <div class="bg">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="host-body">
        <div class="d-flex jc-center">
          <dv-decoration-10 class="dv-dec-10" />
          <div class="d-flex jc-center">
            <dv-decoration-8 class="dv-dec-8" :color="['#00c2ff', '#000000']" />
            <div class="title">
              <span class="title-text">道路机扫大数据可视化平台</span>
              <dv-decoration-6 class="dv-dec-6" :reverse="true" />
            </div>
            <dv-decoration-8
              class="dv-dec-8"
              :reverse="true"
              :color="['#00c2ff', '#000000']"
            />
          </div>
          <dv-decoration-10 class="dv-dec-10-s" />
        </div>

        <!-- 第二行 -->
        <div class="d-flex jc-between px-2">
          <div class="d-flex aside-width">
            <div class="react-left ml-4 react-l-s">
              <span class="react-before"></span>
              <!-- <span class="text">数据分析1</span> -->
              <dv-decoration-3 style="width: 300px; height: 50px" />

              <!-- <dv-decoration-10  class="dv-dec-10-s"/> -->
            </div>
            <div class="react-left ml-3">
              <!-- <span class="text">数据分析2</span> -->
              <dv-decoration-3 style="width: 300px; height: 50px" />
            </div>
          </div>
          <div class="d-flex aside-width">
            <div class="react-right mr-3">
              <!-- <span class="text fw-b">vue-big-screen</span> -->
              <dv-decoration-3 style="width: 300px; height: 50px" />
            </div>
            <div class="react-time mr-4 react-l-s">
              <span class="react-after"></span>
              <!-- <span class="text"
                >{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span
              > -->
              <h4 class="text">{{ dateYear }} {{ dateWeek }} {{ dateDay }}</h4>
            </div>
          </div>
        </div>

        <div class="body-box">
          <!-- 第三行数据 -->
          <div class="content-box">
            <div class="one">
              <dv-border-box-7 :color="['#08304a', '#126e82']">
                <div class="d-flex pt-2 pl-2 title">
                  <span>
                    <icon name="chart-bar" class="text-icon"></icon>
                  </span>
                  <div class="d-flex">
                    <span class="fs-xl text mx-2">实时车辆在线统计 </span>
                  </div>
                </div>

                <div
                  id="WorkOnStandard_VZ"
                  style="width: 98%; height: 200px"
                ></div>
              </dv-border-box-7>
            </div>
            <div class="two">
              <dv-border-box-7 :color="['#08304a', '#126e82']">
                <div class="d-flex pt-2 pl-2 title">
                  <span>
                    <icon name="chart-bar" class="text-icon"></icon>
                  </span>
                  <div class="d-flex">
                    <span class="fs-xl text mx-2">道路作业完成统计 </span>
                  </div>
                </div>

                <div
                  id="WorkOnStandard_DW"
                  style="width: 98%; height: 200px"
                ></div>
              </dv-border-box-7>
            </div>
            <div class="three">
              <dv-border-box-7 :color="['#08304a', '#126e82']">
                <div class="d-flex pt-2 pl-2 title">
                  <span>
                    <icon name="chart-bar" class="text-icon"></icon>
                  </span>
                  <div class="d-flex">
                    <span class="fs-xl text mx-2"
                      >各机扫队道路作业完成百分比
                    </span>
                  </div>
                </div>

                <div
                  id="WorkOnStandard_DB"
                  style="width: 98%; height: 200px"
                ></div>
              </dv-border-box-7>
            </div>
            <div class="four">
              <dv-border-box-7 :color="['#08304a', '#126e82']">
                <div class="d-flex pt-2 pl-2 title">
                  <span>
                    <icon name="chart-bar" class="text-icon"></icon>
                  </span>
                  <div class="d-flex">
                    <span class="fs-xl text mx-2"
                      >各机扫队车辆实时在线百分比</span
                    >
                  </div>
                </div>
                <div
                  id="WorkOnStandard_GZ"
                  style="width: 98%; height: 200px"
                ></div>
              </dv-border-box-7>
            </div>
            <div class="five">
              <dv-border-box-7 :color="['#08304a', '#126e82']">
                <div class="d-flex pt-2 pl-2 title">
                  <span>
                    <icon name="chart-bar" class="text-icon"></icon>
                  </span>
                  <div class="d-flex">
                    <span class="fs-xl text mx-2">车辆出动情况统计</span>
                  </div>
                </div>
                <!-- <div
            id="WorkRatioByCartype"
            style="width: 98%; height: 200px"
          ></div> -->
                <div
                  id="WorkOnStandard_VC"
                  style="width: 98%; height: 200px"
                ></div>
              </dv-border-box-7>
            </div>
            <div class="six">
              <dv-border-box-7 :color="['#08304a', '#126e82']">
                <div class="d-flex pt-2 pl-2 title">
                  <span>
                    <icon name="chart-bar" class="text-icon"></icon>
                  </span>
                  <div class="d-flex">
                    <span class="fs-xl text mx-2"
                      >洗扫道路作业情况、作业达标情况</span
                    >
                  </div>
                </div>
                <div
                  id="WorkOnStandard_XS"
                  style="width: 98%; height: 300px"
                ></div>
              </dv-border-box-7>
            </div>
            <div class="seven">
              <dv-border-box-7 :color="['#08304a', '#126e82']">
                <div class="d-flex pt-2 pl-2 title">
                  <span>
                    <icon name="chart-bar" class="text-icon"></icon>
                  </span>
                  <div class="d-flex">
                    <span class="fs-xl text mx-2"
                      >洒水道路作业情况、作业达标情况</span
                    >
                  </div>
                </div>

                <div
                  id="WorkOnStandard_SS"
                  style="width: 98%; height: 300px"
                ></div>
              </dv-border-box-7>
            </div>
            <div class="eight">
              <dv-border-box-7 :color="['#08304a', '#126e82']">
                <div class="d-flex pt-2 pl-2 title">
                  <span>
                    <icon name="chart-bar" class="text-icon"></icon>
                  </span>
                  <div class="d-flex">
                    <span class="fs-xl text mx-2"
                      >各机扫队车辆出动情况百分比
                    </span>
                  </div>
                </div>

                <div
                  id="WorkOnStandard_GC"
                  style="width: 98%; height: 200px"
                ></div>
              </dv-border-box-7>
            </div>
            <div class="nine">
              <dv-border-box-7 :color="['#08304a', '#126e82']">
                <div class="d-flex pt-2 pl-2 title">
                  <span>
                    <icon name="chart-bar" class="text-icon"></icon>
                  </span>
                  <div class="d-flex">
                    <span class="fs-xl text mx-2">车辆累计行驶情况统计 </span>
                  </div>
                </div>

                <div
                  id="WorkOnStandard_VX"
                  style="width: 98%; height: 200px"
                ></div>
              </dv-border-box-7>
            </div>
            <div class="ten">
              <dv-border-box-7 :color="['#08304a', '#126e82']">
                <div class="d-flex pt-2 pl-2 title">
                  <span>
                    <icon name="chart-bar" class="text-icon"></icon>
                  </span>
                  <div class="d-flex">
                    <span class="fs-xl text mx-2"
                      >各机扫队车辆累计行驶情况百分比
                    </span>
                  </div>
                </div>

                <div
                  id="WorkOnStandard_GX"
                  style="width: 98%; height: 200px"
                ></div>
              </dv-border-box-7>
            </div>
            <div class="eleven">
              <dv-border-box-7 :color="['#08304a', '#126e82']">
                <div class="d-flex pt-2 pl-2 title">
                  <span>
                    <icon name="chart-bar" class="text-icon"></icon>
                  </span>
                  <div class="d-flex">
                    <span class="fs-xl text mx-2"
                      >机扫道路作业情况、作业达标情况</span
                    >
                  </div>
                </div>

                <div
                  id="WorkOnStandard_JS"
                  style="width: 98%; height: 300px"
                ></div>
              </dv-border-box-7>
            </div>
            <div class="twelve">
              <dv-border-box-7 :color="['#08304a', '#126e82']">
                <div class="d-flex pt-2 pl-2 title">
                  <span>
                    <icon name="chart-bar" class="text-icon"></icon>
                  </span>
                  <div class="d-flex">
                    <span class="fs-xl text mx-2"
                      >冲洗道路作业情况、作业达标情况
                    </span>
                  </div>
                </div>

                <div
                  id="WorkOnStandard_CX"
                  style="width: 98%; height: 300px"
                ></div>
              </dv-border-box-7>
            </div>
            <div class="thirteen">
              <dv-border-box-7 :color="['#08304a', '#126e82']">
                <div class="d-flex pt-2 pl-2 title">
                  <span>
                    <icon name="chart-bar" class="text-icon"></icon>
                  </span>
                  <div class="d-flex">
                    <span class="fs-xl text mx-2">车均报警次数情况统计 </span>
                  </div>
                </div>

                <div
                  id="WorkOnStandard_VB"
                  style="width: 98%; height: 200px"
                ></div>
              </dv-border-box-7>
            </div>
            <div class="fourteen">
              <dv-border-box-7 :color="['#08304a', '#126e82']">
                <div class="d-flex pt-2 pl-2 title">
                  <span>
                    <icon name="chart-bar" class="text-icon"></icon>
                  </span>
                  <div class="d-flex">
                    <span class="fs-xl text mx-2"
                      >各机扫队车均报警次数百分比
                    </span>
                  </div>
                </div>

                <div
                  id="WorkOnStandard_GB"
                  style="width: 98%; height: 200px"
                ></div>
              </dv-border-box-7>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { optionWorkOnStandard } from '@/components/echart/bar.js'
import { collectionRate } from '@/components/echart/bar.js'
// import { incomingQuantity } from '@/components/echart/bar.js'
import { spotsNumbe } from '@/components/echart/bar.js'
import { brokenLine } from '@/components/echart/bar.js'
import { optionBarContainBarAndRatio } from '@/components/echart/bar.js'
import drawMixin from "../utils/drawMixin";
import { formatTime } from '../utils/index.js'
import { formatDate } from '@/common/js/date.js'
import * as echarts from 'echarts';
export default {
  mixins: [drawMixin],
  data () {
    return {
      ClientNo: '00000',
      nowDate: formatDate(new Date(new Date().getTime() - 3600 * 1000 * 24), 'yyyy-MM-dd'),
      radio1: '上海',
      form: {
        userName: 'dlhw',
        date: '2020-10',
        clientNo: '00000',
        vehicleData: [{
          排队数: '0',
          车辆总数: '0',
          出动数: '0',
          出动率: '0',
        }],
      },
      MapV: {
        iconLayerDic: {},
        textLayerDic: {},
        dataSetDic: {},
        VIcon_Installations: {},
        VText_Installations: {},
      },
      Data: {
        arrayForType_Rubbish: [],
        arrayCLCPolygonData: [],
        arrayCLCMarkerData: [],
        arrayZZZMarkerData: [],
        arrayNCDMarkerData: [],
        arrayXQCYMarkerData: [],
        arrayCYMarkerData: [],
      },
      isZoomChange: 'S',
      map: null,
      mapZoom: 16,
      timing: null,
      loading: false,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
    }
  },
  components: {
    // centerLeft1,
    // centerLeft2,
    // centerRight1,
    // centerRight2,
    // center,
    // bottomLeft,
    // bottomRight
  },
  mounted () {
    this.ClientNo = window.location.href.split('ClientNo=')[1];
    this.initWorkOnStandard_SS()
    this.initWorkOnStandard_CX()
    this.initWorkOnStandard_XS()
    this.initWorkOnStandard_JS()
    this.initWorkOnStandard_VZ()
    this.initWorkOnStandard_DW()
    this.initWorkOnStandard_DB()
    this.initWorkOnStandard_GZ()
    this.initWorkOnStandard_GC()
    this.initWorkOnStandard_VC()
    this.initWorkOnStandard_VX()
    this.initWorkOnStandard_GX()
    this.initWorkOnStandard_VB()
    this.initWorkOnStandard_GB()

    this.initWorkRatioByCartype()
    this.timeFn()
  },
  beforeDestroy () {
    clearInterval(this.timing)
  },
  methods: {
    // 昨日各类型餐饮单位收运数量及覆盖率格式
    async initWorkRatioByCartype () {
      // [{"GROUPNAME":null,"CAR_TYPE":"洗路车","ALLNUM":"93","CURRENTNUM":"57"},
      // {"GROUPNAME":null,"CAR_TYPE":"机扫车","ALLNUM":"27","CURRENTNUM":"17"},
      // {"GROUPNAME":null,"CAR_TYPE":"高压清洗车","ALLNUM":"41","CURRENTNUM":"12"},
      // {"GROUPNAME":null,"CAR_TYPE":"洒水车","ALLNUM":"55","CURRENTNUM":"16"},
      // {"GROUPNAME":null,"CAR_TYPE":"小型机扫车","ALLNUM":"25","CURRENTNUM":"5"},
      // {"GROUPNAME":null,"CAR_TYPE":"除雪车","ALLNUM":"6","CURRENTNUM":"2"},
      // {"GROUPNAME":null,"CAR_TYPE":"总计","ALLNUM":"247","CURRENTNUM":"104"}]
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkRatioByCartype'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(optionBarContainBarAndRatio(["覆盖率", "覆盖数", "总数"], {
        category: ["小区", "饭店", "企业"],
        // lineData: [300, 400, 600], barData: [276, 348, 336],
        // rateData: [92, 87, 56,]
      }));
      var url = "http://111.160.78.62:5565/CompanyapiDFLSapi/DFBigScreen/GetPointWorkByTypeInfo?CLIENT_NO=" + this.ClientNo
      //  +localStorage.getItem("CLIENT_NO");
      const { data } = await this.$Http.get(url)
      myChart.setOption({
        series: [{
          data: data.rateData
        }, {
          data: data.barData
        }, {
          data: data.lineData
        }]

      });
    },
    // 实时车辆在线统计
    async initWorkOnStandard_VZ () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_VZ'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(collectionRate());
      var url = "http://111.160.78.62:9935/api/EChartsYX/GetPieMultipurposeN?sqlName=dlhw&url=exec T_GetVehicleOnlineInfo '" + this.ClientNo + "'"
      //  +localStorage.getItem("CLIENT_NO");
      const { data } = await this.$Http.get(url)

      myChart.setOption({
        series: [{
          data: data
        },]
      });
    },
    // 道路作业完成统计
    async initWorkOnStandard_DW () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_DW'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(collectionRate());
      var url = "http://111.160.78.62:9935/api/EChartsYX/GetPieMultipurposeN?sqlName=dlhw&url=exec T_GetVehicleRoadInfo  '" + this.nowDate + "','" + this.ClientNo + "'"
      //  +localStorage.getItem("CLIENT_NO");
      const { data } = await this.$Http.get(url)

      myChart.setOption({
        series: [{
          data: data
        },]
      });
    },
    // 车辆出动情况统计
    async initWorkOnStandard_VC () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_VC'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(collectionRate());
      var url = "http://111.160.78.62:9935/api/EChartsYX/GetPieMultipurposeN?sqlName=dlhw&url=exec T_GetVehicleWorkInfo  '" + this.nowDate + "','" + this.ClientNo + "'";
      //  +localStorage.getItem("CLIENT_NO");
      const { data } = await this.$Http.get(url)

      myChart.setOption({
        series: [{
          data: data
        },]
      });
    },
    // 车辆累计行驶情况统计
    async initWorkOnStandard_VX () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_VX'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(collectionRate());
      var url = "http://111.160.78.62:9935/api/EChartsYX/GetPieMultipurposeN?sqlName=dlhw&url=exec T_GetVehicleDistanceInfo  '" + this.nowDate + "','" + this.ClientNo + "'"
      //  +localStorage.getItem("CLIENT_NO");
      const { data } = await this.$Http.get(url)
      myChart.setOption({
        series: [{
          data: data
        },]
      });
    },
    // 车均报警次数情况统计
    async initWorkOnStandard_VB () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_VB'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(collectionRate());
      var url = "http://111.160.78.62:9935/api/EChartsYX/GetPieMultipurposeN?sqlName=dlhw&url=exec T_GetVehicleAlarmInfo  '" + this.nowDate + "','" + this.ClientNo + "'"
      //  +localStorage.getItem("CLIENT_NO");
      const { data } = await this.$Http.get(url)
      myChart.setOption({
        series: [{
          data: data
        },]
      });
    },
    // 各机扫队道路作业完成百分比
    async initWorkOnStandard_DB () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_DB'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(brokenLine());
      var url = "http://111.160.78.62:9935/api/EChartsYX/GetT1BarMultipurpose?sqlName=dlhw&url=exec T_GetVehicleRoadInfo  '" + this.nowDate + "','" + this.ClientNo + "'"
      //  +localStorage.getItem("CLIENT_NO");
      const { data } = await this.$Http.get(url);
      myChart.setOption({
        // legend: {
        //   data: ['津C26292', '津C26292', '津C26292', '津C26292', '津C26292', '津C26292', '津C26292']
        // },
        xAxis: {
          data: data.categories
        },
        series: [{

          data: data.data
        }]
      });
    },
    // 各机扫队车辆实时在线百分比
    async initWorkOnStandard_GZ () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_GZ'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(spotsNumbe());
      var url = "http://111.160.78.62:9935/api/EChartsYX/GetT1BarMultipurpose?sqlName=dlhw&url=exec T_GetVehicleOnlineInfo '" + this.ClientNo + "'"
      //  +localStorage.getItem("CLIENT_NO");
      const { data } = await this.$Http.get(url);
      myChart.setOption({
        xAxis: {
          data: data.categories
        },
        series: [{

          data: data.data
        }]
      });
    },
    //各机扫队车辆出动情况百分比
    async initWorkOnStandard_GC () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_GC'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(spotsNumbe());
      var url = "http://111.160.78.62:9935/api/EChartsYX/GetT1BarMultipurpose?sqlName=dlhw&url=exec T_GetVehicleWorkInfo  '" + this.nowDate + "','" + this.ClientNo + "'"
      //  +localStorage.getItem("CLIENT_NO");
      const { data } = await this.$Http.get(url);
      myChart.setOption({
        xAxis: {
          data: data.categories
        },
        series: [{

          data: data.data
        }]
      });
    },
    //各机扫队车辆累计行驶情况百分比
    async initWorkOnStandard_GX () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_GX'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(spotsNumbe());
      var url = "http://111.160.78.62:9935/api/EChartsYX/GetT1BarMultipurpose?sqlName=dlhw&url=exec T_GetVehicleDistanceInfo  '" + this.nowDate + "','" + this.ClientNo + "'"
      //  +localStorage.getItem("CLIENT_NO");
      const { data } = await this.$Http.get(url);
      myChart.setOption({
        xAxis: {
          data: data.categories
        },
        series: [{

          data: data.data
        }]
      });
    },
    //各机扫队车均报警次数百分比
    async initWorkOnStandard_GB () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_GB'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(spotsNumbe());
      var url = "http://111.160.78.62:9935/api/EChartsYX/GetT1BarMultipurpose?sqlName=dlhw&url=exec T_GetVehicleAlarmInfo  '" + this.nowDate + "','" + this.ClientNo + "'"
      //  +localStorage.getItem("CLIENT_NO");
      const { data } = await this.$Http.get(url);
      myChart.setOption({
        xAxis: {
          data: data.categories
        },
        series: [{

          data: data.data
        }]
      });
    },

    timeFn () {
      this.timing = setInterval(() => {
        this.dateDay = formatTime(new Date(), 'HH: mm: ss')
        this.dateYear = formatTime(new Date(), 'yyyy-MM-dd')
        this.dateWeek = this.weekday[new Date().getDay()]
      }, 1000)
    },
    cancelLoading () {
      setTimeout(() => {
        this.loading = false
        this.initC();
      }, 2000)
    },
    async initWorkOnStandard_SS () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_SS'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(optionWorkOnStandard());
      var url = "http://111.160.78.62:9935/api/EChartsYX/GetWorkOnStandard?sqlName=dlhw&url=exec T_GetVehicleRoadStandardInfo '" + this.form.date + "','" + this.form.clientNo + "',洒水";
      const { data } = await this.$Http.get(url)
      myChart.setOption({
        xAxis: {
          data: data.categories
        },
        series: [{
          data: data.dataWork
        }, {
          data: data.dataNotWork
        }, {
          data: data.dataOnStandard
        }, {
          data: data.dataNotStandard
        }]
      });
    },
    async initWorkOnStandard_CX () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_CX'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(optionWorkOnStandard());
      var url = "http://111.160.78.62:9935/api/EChartsYX/GetWorkOnStandard?sqlName=dlhw&url=exec T_GetVehicleRoadStandardInfo '" + this.form.date + "','" + this.form.clientNo + "',冲洗";
      const { data } = await this.$Http.get(url)
      myChart.setOption({
        xAxis: {
          data: data.categories
        },
        series: [{
          data: data.dataWork
        }, {
          data: data.dataNotWork
        }, {
          data: data.dataOnStandard
        }, {
          data: data.dataNotStandard
        }]
      });
    },
    async initWorkOnStandard_XS () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_XS'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(optionWorkOnStandard());
      var url = "http://111.160.78.62:9935/api/EChartsYX/GetWorkOnStandard?sqlName=dlhw&url=exec T_GetVehicleRoadStandardInfo '" + this.form.date + "','" + this.form.clientNo + "',洗扫";
      const { data } = await this.$Http.get(url)
      myChart.setOption({
        xAxis: {
          data: data.categories
        },
        series: [{
          data: data.dataWork
        }, {
          data: data.dataNotWork
        }, {
          data: data.dataOnStandard
        }, {
          data: data.dataNotStandard
        }]
      });
    },
    async initWorkOnStandard_JS () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_JS'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(optionWorkOnStandard());
      var url = "http://111.160.78.62:9935/api/EChartsYX/GetWorkOnStandard?sqlName=dlhw&url=exec T_GetVehicleRoadStandardInfo '" + this.form.date + "','" + this.form.clientNo + "',机扫";
      const { data } = await this.$Http.get(url)
      myChart.setOption({
        xAxis: {
          data: data.categories
        },
        series: [{
          data: data.dataWork
        }, {
          data: data.dataNotWork
        }, {
          data: data.dataOnStandard
        }, {
          data: data.dataNotStandard
        }]
      });
    },
  }
}
</script>

<style lang="scss">
@import '../assets/scss/index.scss';
//下方区域的布局
.content-box {
  grid-auto-flow: row dense;
  display: grid;
  grid-template-columns: repeat(4, 25%);
  grid-template-rows: repeat(8, 12%);
  grid-template-areas:
    'one two three four'
    'one two three four'
    'five six seven eight'
    'five six seven eight'
    'nine six  seven ten'
    'nine eleven  twelve ten'
    'thirteen eleven twelve fourteen'
    'thirteen eleven twelve fourteen';
}
.one {
  margin: 5px;
  grid-area: one;
  background: rgba(8,48,74,0.5);
}

.two {
  margin: 5px;
  grid-area: two;
  background: rgba(8,48,74,0.5);
  // grid-row-start: span 2;
}
.three {
  margin: 5px;
  grid-area: three;
  background: rgba(8,48,74,0.5);
}
.four {
  margin: 5px;
  grid-area: four;
  background: rgba(8,48,74,0.5);
}
.five {
  margin: 5px;
  grid-area: five;
  background: rgba(8,48,74,0.5);
}
.six {
  margin: 5px;
  grid-area: six;
  background: rgba(8,48,74,0.5);
}
.seven {
  margin: 5px;
  grid-area: seven;
  background: rgba(8,48,74,0.5);
}
.eight {
  margin: 5px;
  grid-area: eight;
  background: rgba(8,48,74,0.5);
}
.nine {
  margin: 5px;
  grid-area: nine;
  background: rgba(8,48,74,0.5);
}
.ten {
  margin: 5px;
  grid-area: ten;
  background: rgba(8,48,74,0.5);
}
.eleven {
  margin: 5px;
  grid-area: eleven;
  background: rgba(8,48,74,0.5);
}
.twelve {
  margin: 5px;
  grid-area: twelve;
  background: rgba(8,48,74,0.5);
}
.thirteen {
  margin: 5px;
  grid-area: thirteen;
  background: rgba(8,48,74,0.5);
}
.fourteen {
  margin: 5px;
  grid-area: fourteen;
  background: rgba(8,48,74,0.5);
}
// 底部数据
.bototm-box {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(2, 50%);
}
.title {
  padding-top: 10px;
  padding-left: 20px;
  .text {
    font-size: 15px;
    color: #fff;
  }
}
.title-text {
  font-family: 'SimHei';
  font-weight: bold;
}
</style>
